<template>
  <div>
    <!-- header 头-->
    <van-nav-bar title="申请伴宠专员" left-arrow @click-left="onClickLeft" fixed />
    <!-- 广播 -->
    <van-notice-bar
      left-icon="volume-o"
      text="请使用本人手机号、本人实名认证微信号申请" />

    <!-- 定宽 -->
    <div class='pet'>

      <!-- 申请伴宠专员的类型 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>申请伴宠专员的类型</span>
      </div>
      <div>
        <van-button class="pet-select" @click="alertMenu" ></van-button>
        <van-action-sheet v-model="show" :actions="actions "  cancel-text="取消" round @cancel="toCancel" @select="onSelect" />
      </div>

      <!-- 手机号 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>手机号</span>
      </div>
      <input v-model="phone"  @blur="animate()" class="pet-input" type="text" placeholder="请输入您的手机号" maxlength="11" >

      <!-- 微信号 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>微信号</span>
      </div>
      <input class="pet-input" type="text" placeholder="请填写微信号">

      <!-- 养宠经验 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>养宠经验</span>
      </div>
      <input class="pet-input" type="text" placeholder="您有多少年养宠经验">

      <!-- 可服务时间 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>可服务时间</span>
      </div>
      <div>
        <van-button class="pet-select" @click="alertMenu2">请选择可服务时间</van-button>
        <van-action-sheet v-model="show2" :actions="actions2" cancel-text="取消" round @cancel="toCancel" @select="onSelect" />
      </div>

      <!-- 照顾宠物的经验 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>照顾宠物的经验</span>
      </div>
      <van-button class="pet-select" @click="alertMenu3">请选照顾宠物的时间</van-button>
      <van-action-sheet v-model="show3" :actions="actions3" cancel-text="取消" round @cancel="toCancel" @select="onSelect" />

      <!-- 个人简介、养宠经历 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>个人简历、养宠经历</span>
      </div>
      <textarea placeholder="如那一年开始养宠物、喂养方式、养宠经验、宠物现状、和宠物之间的故事的等。" name="" id="" cols="30" rows="10"></textarea>

      <!-- 养宠技能、上面喂猫/遛狗经验(加分项选填) -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>养宠技能、上面喂猫/遛狗经验</span>
         <span class="a">(加分项选填)</span>
      </div>
      <textarea placeholder="如果有相关资格证书、喂药经验、打针经验、宠物救治经验、在其他平台工作过、在宠物店工作过等。" name="" id="" cols="30" rows="10"></textarea>

      <!-- 上传宠物相册 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>上传宠物相册</span>
        <span class="a">(现养宠物、三张图片以上)</span>
      </div>
      <!-- 上传照片 -->
      <van-uploader v-model="fileList" multiple />
      
      <!-- 设置头像和昵称 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>设置头像和昵称</span>
      </div>
      <div>
        <van-uploader  v-model="fileList2" multiple />
      </div>

      <!-- 昵称 -->
      <div class="pet-type">
        <img src="/img/1.png" alt="">
        <span>昵称</span>
        <input class="pet-name" type="text" placeholder="昵称">
      </div>

      <!--  -->
      <van-button class="pet-next" block>下一步</van-button>
      
     <br>
     
    </div>
    
  </div>
</template>

<script>
  export default {
     data() {
      return {
        //验证手机号
        phone:"",
        msg: '',
        show: false,
        show2: false,
        show3: false,
        
        // 申请伴宠专员的类型
        actions: [
          // '喂猫专员','喂狗专员','喂猫专员+喂狗专员'
          {
            name: '喂猫专员'
          },
          {
            name: '喂狗专员'
          },
          {
            name: '喂猫专员+喂狗专员'
          }
        ],
        // 可服务时间
        actions2: [
          {
            name: '周末'
          },
          {
            name: '周末、节假日'
          },
          {
            name: '工作日下班后、周末'
          },
          {
            name: '工作日、周末'
          }
        ],
        // 照顾宠物的经验
        actions3: [
          {
            name: '现在养宠、有上门服务经验'
          },
          {
            name: '现在养宠、无上门服务经验'
          },
          {
            name: '曾经养宠、有上门服务经验'
          },
          {
            name: '曾经养宠、无上门服务经验'
          },
          {
            name: '帮别人照顾过宠物'
          },
        ],

         
        // 上传照片
        fileList: [ ],
        // 上传头像
        fileList2: [ ],
      }
    },
    methods: {
      onClickLeft(){
        this.$router.push("/mine")
      },
      // 验证手机号
       animate(){
           var re = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
           let str = this.phone;
           if(re.test(str)){
               alert('成功')
           }else {
               alert('请输入正确的手机号')
          }
       },
       alertMenu3(){
        this.show3 = true;
      },
       alertMenu2(){
        this.show2 = true;
      },
      alertMenu(){
        this.show = true;
      },
      onSelect(item){
          console.log(item);
          this.show = false;
          this.$toast({
            message:item.name,
            duration:500
          })
      },
      
      toCancel(){
           console.log('点击了取消'); console.log(this);},



    },
  }
</script>

<style lang="scss" scoped>
::v-deep  .van-button{
  color: #999;
  font-size:12px;
}
::-webkit-input-placeholder{/*Webkit browsers*/
	color:#999;
	font-size:12px;
}
img{
  position: relative;
  top: -0.8vw;
}
::v-deep .van-icon-arrow-left:before{
  color: #C0C0C0;
}
::v-deep .van-notice-bar{
  background-color: #fff;
}
.pet{
  width: 92%;
  margin: 0 auto;

  .pet-type{
    margin: 20px 0;

    span{
      display: inline-block;
      font-weight: 800;
    }
  }
  .pet-select{
    width: 100%;
    border-radius: 10px;
    background-color: #EEEEEE;
    // font-size: 18px;
  }

   textarea{
      width: 100%; height: 150px;      
      padding-left: 10px;
      line-height: 8.2vw;
      font-size: 14px; 
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      background-color: #f2f2f2;
  }

  .pet-input{
    width: 100%;
    height: 43px;
    display: inline-block;
    background-color: #EEEEEE;
    border-radius: 10px;
    text-align: center;
    border: 0px;
    // font-size: 18px;
    padding: 0 15px 0 15px;
  }

  .pet-undergo{
    width: 100%;
    height: 300px;
    display: inline-block;
    background-color: #EEEEEE;
    border-radius: 10px;
    border: 0px;
    // font-size: 18px;
    padding: 0 15px 0 15px;
    }
  .a{ color: #C0C0C0; font-size: 12px; margin-left: 5px;}


  
  .pet-name{
    width: 200px;
    height: 43px;
    display: inline-block;
    background-color: #EEEEEE;
    border-radius: 20px;
    border: 0px;
    font-size: 18px;
    margin-left: 12px ;
    padding: 0 15px 0 15px;
  }

  // 头像
  //  ::v-deep .van-uploader__upload{
  //   border-radius: 50%;
  //   border: 1px solid #f8e176;
  // }

  .pet-next{
    border-radius: 20px;
    background-color: #f8e176;
    margin: 40px 0 20px 0;
    color: white;
  }
}
</style>